import React, { useState } from 'react';
import './timetable.css';
import Modal from '../../components/MemorandumModal';
import { Button, List, message } from 'antd';
import { FormOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import rootData from '../../static';
export default function Timetable() {
  const [isModalVisible, setisModalVisible] = useState(false);
  const [day, setDay] = useState('Monday');
  const [list, setList] = useState([]);
  const [memorandumData, setmemorandumData] = useState(
    JSON.parse(localStorage.getItem('memorandumData')) || rootData
  );

  const handleSave = () => {
    let NewData = JSON.parse(JSON.stringify(memorandumData));
    NewData = NewData.map((d) => ({
      ...d,
      time:
        day === d.day
          ? d.time.map((i) => ({
              ...i,
              memorandum:
                i.timeName === list.timeName ? list.memorandum : i.memorandum,
            }))
          : d.time,
    }));
    localStorage.setItem('memorandumData', JSON.stringify(NewData));
    setmemorandumData(NewData);
    setisModalVisible(false);
    message.success('Saved successfully！');
  };

  let time = memorandumData.find((i) => i.day === day).time;

  const columns = () => {
    let direction = [
      {
        timeName: '9:30-12',
      },
      {
        timeName: '12-3:30',
      },
      {
        timeName: '3:30-6',
      },
    ];
    return direction.map((i) => ({
      ...i,
      day: memorandumData.map((n) => ({
        dayName: n.day,
        memorandum: n.time.find((x) => x.timeName === i.timeName).memorandum,
      })),
    }));
  };
  return (
    <div className="timetable">
      <div className="tablecols">
        <table className="Weekly Schedule">
          <thead>
            <tr>
              <th></th>
              {memorandumData.map((i, vindex) => (
                <th key={vindex}>
                  <span style={{ marginRight: 20 }}>{i.day}</span>

                  <Button
                    icon={<FormOutlined />}
                    onClick={() => {
                      setDay(i.day);
                      setisModalVisible(true);
                    }}
                    size="small"
                  />
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {columns().map((i, index) => (
              <tr key={index}>
                <td>{i.timeName}</td>
                {i.day.map((item) => (
                  <td id={item.dayName} key={item.dayName}>
                    <div>
                      <List
                        bordered
                        locale={{ emptyText: 'No records!' }}
                        dataSource={item.memorandum}
                        renderItem={(j, idx) => (
                          <List.Item key={idx}>
                            <span style={{ color: '#4989f4' }}>
                              <ExclamationCircleOutlined spin />
                              <span style={{ marginLeft: 10 }}>{j.txt}</span>
                            </span>
                          </List.Item>
                        )}
                      />
                    </div>
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <Modal
        setisModalVisible={setisModalVisible}
        isModalVisible={isModalVisible}
        time={time}
        list={list}
        setList={setList}
        handleSave={handleSave}
      />
    </div>
  );
}
